<template>
  <div class="entity-box">
    <el-row :gutter="20">
      <el-col :span="16">
        <NewCard title="实体设置" :border="false">
          <el-table
            @cell-click="selectTabelFn"
            :data="entityList"
            style="width: 100%"
            highlight-current-row
            :default-sort="{ prop: 'sort', order: 'ascending' }">
            <!-- <el-table-column type="expand" prop="fullName" width="50">
              内表格
              <template slot-scope="props">
                <el-table
                  :data="props.row.managerList"
                  style="width: 100%"
                  highlight-current-row
                >
                  <el-table-column width="50"></el-table-column>
                  <el-table-column label="姓名" prop="fullName" width="300">
                  </el-table-column>
                  <el-table-column width="50"></el-table-column>
                  <el-table-column label="简称" prop="name" width="300">
                  </el-table-column>
                  <el-table-column label="职务">
                    <template slot-scope="scope">
                      <p>{{ scope.row.job }}</p>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作"> </el-table-column>
                </el-table>
                <p class="addList"><i class="el-icon-plus"></i></p>
              </template>
              内表格 end
            </el-table-column> -->
            <el-table-column prop="fullName" label="实体全称" width="260">
              <template #default="{ row }">
                <div
                  v-if="isShowAlterFullName != row.id"
                  @dblclick="alterFullName(row.id)"
                >
                  {{ row.fullName }}
                </div>
                <el-input
                  @keydown.enter="editSort(row, $event)"
                  @[blur]="editSort(row, $event)"
                  type="text"
                  v-model="row.fullName"
                  v-else
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="实体简称">
              <template #default="{ row }">
                <div
                  v-if="isShowAlterName != row.id"
                  @dblclick="alterName(row.id)"
                >
                  {{ row.name }}
                </div>
                <el-input
                  @keydown.enter="editSort(row, $event)"
                  @[blur]="editSort(row, $event)"
                  type="text"
                  v-model="row.name"
                  v-else
                />
              </template>
            </el-table-column>
            <el-table-column prop="payment" label="实体收款人" width="180">
              <template #default="{ row }">
                <p v-if="isShowPayment != row.id" @dblclick="isShowPayment = row.id">{{row.payment || '--'}}</p>
                <!-- 实体收款人 -->
                <el-select v-else v-model="row.payment" remote filterable :remote-method="remoteMethod" placeholder="实体收款人" popper-class="addRemote" @change="changePayment(row)">
                  <el-option
                    v-for="item in paymentOrOperation"
                    :key="`${item.phonenumber}+${item.nickName}`"
                    :label="`${item.phonenumber}(${item.nickName})`"
                    :value="item.phonenumber">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="operations" label="管拨收款人" width="180">
              <template #default="{ row }">
                <p v-if="isShowOperations != row.id" @dblclick="isShowOperations = row.id">{{row.operations || '--'}}</p>
                <!-- 管拨收款人 -->
                <el-select v-else v-model="row.operations" remote filterable :remote-method="remoteMethod" placeholder="实体收款人" popper-class="addRemote" @change="changeOperations(row)">
                  <el-option
                    v-for="item in paymentOrOperation"
                    :key="item.phonenumber"
                    :label="`${item.phonenumber}(${item.nickName})`"
                    :value="item.phonenumber">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <!-- <el-table-column label="管理拨比"></el-table-column> -->
            <!-- <el-table-column label="总拨比"></el-table-column> -->
            <el-table-column prop="createTime" label="创建时间" width="70">
              <template #default="{ row }">
                <p>{{getTime(row.createTime.split(' ')[0])}}</p>
              </template>
            </el-table-column>
            <el-table-column label="排序" sortable prop="sort" width="70">
              <template #default="{ row }">
                <div
                  v-if="isShowAlterSort != row.id"
                  @dblclick="alterSort(row.id)"
                >
                  {{ row.sort }}
                </div>
                <el-input
                  @keydown.enter="editSort(row, $event)"
                  @[blur]="editSort(row, $event)"
                  type="text"
                  v-model="row.sort"
                  v-else
                />
              </template>
            </el-table-column>
          </el-table>
          <!-- 底部按钮  -->
          <div class="bottomBtn">
            <el-button @click="clickbBtn" v-if="bottomBtnShow"
              >+ 添加实体</el-button
            >
            <template v-else>
              <div class="footerBox">
                <el-input
                  v-model="addObj.fullName"
                  placeholder="全称"
                  @keyup.enter.native="addMaterials"
                  ref="bottBtn">
                </el-input>
                <el-input
                  class="miniInput"
                  v-model="addObj.name"
                  placeholder="简称"
                  @keyup.enter.native="addMaterials"
                  ref="bottBtn">
                </el-input>
                <!-- 实体收款人 -->
                <el-select v-model="addObj.payment" remote filterable :remote-method="remoteMethod" placeholder="实体收款人" popper-class="addRemote">
                  <el-option
                    v-for="item in paymentOrOperation"
                    :key="`${item.nickName}+${item.phonenumber}`"
                    :label="`${item.nickName}(${item.phonenumber})`"
                    :value="item.phonenumber">
                  </el-option>
                </el-select>
                <!-- 管拨收款人 -->
                <el-select v-model="addObj.operations" remote filterable :remote-method="remoteMethod" placeholder="实体收款人" popper-class="addRemote">
                  <el-option
                    v-for="item in paymentOrOperation"
                    :key="item.phonenumber"
                    :label="`${item.phonenumber}(${item.nickName})`"
                    :value="item.phonenumber">
                  </el-option>
                </el-select>

                <el-input
                  class="miniInput"
                  placeholder="排序"
                  v-model.number="addObj.sort"
                  @keyup.enter.native="addMaterials"
                  ref="bottBtn">
                </el-input>
                <div class="box-button">
                  <el-button type="primary" round @click="addEntityFn">保存</el-button>
                  <el-button round @click="resetAdd">取消</el-button>
                </div>
              </div>
            </template>
          </div>
        </NewCard>
      </el-col>
      <el-col :span="8">
        <NewCard title="操作人员" :isright="true" :border="false">
          <el-table :data="currentSelectItem.managerList" highlight-current-row>
            <el-table-column label="名称 " prop="name">
              <template #default="{ row }">
                <div
                  v-if="isShowOperationName != row.id"
                  @dblclick="isShowOperationName = row.id"
                >
                  {{ row.name }}
                </div>
                <input
                  @keydown.enter="editOperationName(row, $event)"
                  @[personBlur]="editOperationName(row, $event)"
                  type="text"
                  v-model="row.name"
                  v-else
                />
              </template>
            </el-table-column>

            <el-table-column label="手机号" prop="phone"> </el-table-column>

            <!-- <el-table-column label="职务" prop="postion">
              <template #default="{ row }">
                <div
                  v-if="isShowOperationPostion != row.id"
                  @dblclick="isShowOperationPostion = row.id"
                >
                  {{ row.postion }}
                </div>
                <input
                  @keydown.enter="editOperationName(row, $event)"
                  @[personBlur]="editOperationName(row, $event)"
                  type="text"
                  v-model="row.postion"
                  v-else
                />
              </template>
            </el-table-column> -->

            <!-- <el-table-column label="拨比(%)" prop="commission">
              <template #default="{ row }">
                <div
                  v-if="isShowOperationCommission != row.id"
                  @dblclick="isShowOperationCommission = row.id"
                >
                  {{ row.commission }}
                </div>
                <input
                  @keydown.enter="editOperationName(row, $event)"
                  @[personBlur]="editOperationName(row, $event)"
                  type="text"
                  v-model="row.commission"
                  v-else
                />
              </template>
            </el-table-column> -->

            <el-table-column label="操作">
              <template #default="{ row }">
                <div
                  class="cancelAuthoriZation"
                  @click="cancelAuthoriZationFn(row)"
                  v-hasPermi="['base:OrganizationManager:remove']">
                  取消授权
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 底部按钮 -->
          <div class="bottomBtn" v-if="isClick">
            <el-button
              @click="bottomPersonBtnShow = false"
              v-if="bottomPersonBtnShow"
              >+ 添加人员</el-button
            >
            <template v-else>
              <div class="footerBox addStaff">
                <div class="input_box">
                  <!-- <el-input
                    v-model="addObjPerson.name"
                    placeholder="名称"
                    @keyup.enter.native="addMaterials"
                    ref="bottBtn">
                  </el-input> -->
                  <el-input
                    v-model="addObjPerson.phone"
                    placeholder="手机号"
                    @keyup.enter.native="addMaterials"
                    ref="bottBtn"
                  >
                  </el-input>
                  <!-- <el-input
                    v-model="addObjPerson.postion"
                    placeholder="职位"
                    @keyup.enter.native="addMaterials"
                    ref="bottBtn"
                  >
                  </el-input>
                  <el-input
                    placeholder="拨比"
                    v-model.number="addObjPerson.commission"
                    @keyup.enter.native="addMaterials"
                    ref="bottBtn"
                  >
                  </el-input> -->
                </div>
                <div class="box-button">
                  <el-button type="primary" round @click="addPersonFn">保存</el-button>
                  <el-button round @click="bottomPersonBtnShow = true">取消</el-button>
                </div>
              </div>
            </template>
          </div>
        </NewCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
import debounce from "lodash/debounce";
import {
  getPrganizationlist_managerApi,
  getPrganizationAddApi,
  getPrganizationlist_managerinfoApi,
  getPrganizationEditApi,
  surePositionOrganizationManagerApi,
} from "@/wss/newApi_3-24/base/organization.js";

import {
  getOrganizationManagerEditApi,
  getOrganizationManagerAddApi,
  getOrganizationManagerRemoveApi,
} from "@/wss/newApi_3-24/base/organizationManager.js";

export default {
  name: "Entity",
  components: { NewCard, SubBtn },
  data() {
    return {
      blur: "blur",
      personBlur: "blur",

      // 是否选择了组织
      isClick: false,
      // 当前选择实体的对象
      currentSelectItem: {
        managerList: [],
      },
      // 添加个人
      addObjPerson: {
        type: 0,//0其他 1运营总监 2拨比收款人
        phone: "",
        postion: "",
        commission: "",
        organizationId: "",
      },
      // 添加组织
      addObj: {
        fullName: "",
        name: "",
        sort: "",
        payment: '',
        operations: '',
        managerList:[], //实体收款人和管拨收款人
      },
      paymentOrOperation:[],//实体收款人和管拨收款人的人员列表

      // 是否显示名称排序
      isShowAlterName: "",
      // 是否显示编辑排序
      isShowAlterSort: "",
      // 是否显示编辑排序
      isShowAlterFullName: "",
      // 是否显示操作人员名字编辑
      isShowOperationName: "",
      // 是否显示操作人员拨比编辑
      isShowOperationCommission: "",
      // 是否显示操作人员职务编辑
      isShowOperationPostion: "",
      // 显示实体收款人编辑
      isShowPayment: "",
      // 实现管拨收款人编辑
      isShowOperations: "",
      // 实体列表
      entityList: [],
      bottomPersonBtnShow: true,
      bottomBtnShow: true, //底部按钮
      bottomBtnValue: "", //底部输入值

      currentBtnState: 1, // 当前点击的实体拨比 1项目 2咨询 3内容
      // 树形结构
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 项目列表内容
      projectList: [
        {
          name: "财务",
          children: [
            {
              name: "工商更改",
              children: [
                { name: "普通公司注册", closedThan: "10" },
                { name: "外资公司注册", closedThan: "10" },
                { name: "营业执照办理", closedThan: "10" },
              ],
            },
            { name: "公司注册" },
            { name: "公司注销" },
          ],
        },
        {
          name: "法务",
          children: [
            { name: "工商更改" },
            {
              name: "公司注册",
              children: [
                { name: "普通公司注册", closedThan: "10" },
                { name: "外资公司注册", closedThan: "10" },
                { name: "营业执照办理", closedThan: "10" },
              ],
            },
            { name: "公司注销" },
          ],
        },
        {
          name: "税务",
          children: [
            { name: "工商更改" },
            { name: "公司注册" },
            {
              name: "公司注销",
              children: [
                { name: "普通公司注册", closedThan: "10" },
                { name: "外资公司注册", closedThan: "10" },
                { name: "营业执照办理", closedThan: "10" },
              ],
            },
          ],
        },
      ],

      //内容列表数据
      contentList: [
        { type: "解答", closedThan: "10" },
        { type: "政策", closedThan: "10" },
        { type: "法条", closedThan: "10" },
        { type: "合同", closedThan: "10" },
      ],
    };
  },
  created() {
    this.getPrganizationlist_managerFn(); //获取实体列表
  },
  methods: {
    // 获取预计创建时间*********
    getTime(days) {
      let arr = days.split("-");
      return arr[0].slice(2) + arr[1] + arr[2];
    },

    // 修改实体设置
    async editSort(row, event) {
      // 如果是回车键盘，就不触发blur事件
      if (event.code == "Enter") {
        this.blur = "xxx";
      }
      // 排序、全称、简称为空直接退出
      if (row.sort == "" || row.fullName == "" || row.name == "") {
        this.$message({
          type: "warning",
          message: "不可以为空",
        });
        return;
      }
      let result = getPrganizationEditApi(row);
      result.then(()=>{
        // 添加完隐藏输入框  修改成功的情况下
        this.isShowAlterSort = "";
        this.isShowAlterFullName = "";
        this.isShowAlterName = "";
        this.getPrganizationlist_managerFn();
        // 还原blur事件
        this.blur = "blur";
        this.$message({type: "success",message: msg,});
      }).catch((err)=>{
        // 添加完隐藏输入框  修改成功的情况下
        this.isShowAlterSort = "";
        this.isShowAlterFullName = "";
        this.isShowAlterName = "";
        this.getPrganizationlist_managerFn();
        // 还原blur事件
        this.blur = "blur";
      })
      // let { code, msg } = await getPrganizationEditApi(row);
      // if(code == 200){
      //   // 添加完隐藏输入框  修改成功的情况下
      //   this.isShowAlterSort = "";
      //   this.isShowAlterFullName = "";
      //   this.isShowAlterName = "";
      //   this.getPrganizationlist_managerFn();
      //   // 还原blur事件
      //   this.blur = "blur";
      //   this.$message({
      //     type: "success",
      //     message: msg,
      //   });
      // }

    },
    
    //显示编辑实体全称
    alterFullName(id) {
      this.isShowAlterFullName = id;
    },

    //显示编辑简称
    alterName(id) {
      this.isShowAlterName = id;
    },

    //显示编辑排序
    alterSort(id) {
      this.isShowAlterSort = id;
    },

    // 修改实体收款人的接口
    async changePayment(row){
      let { code, msg } = await getPrganizationEditApi(row);
      if (code != 200) return;
      // 添加完隐藏输入框
      this.isShowPayment= "",// 显示实体收款人编辑
      this.isShowOperations= "",// 实现管拨收款人编辑
      this.getPrganizationlist_managerFn() //刷新列表

      this.$message({
        type: "success",
        message: msg,
      });
    },

    // 修改管拨收款人的接口
    async changeOperations(row){
      let { code, msg } = await getPrganizationEditApi(row);
      if (code != 200) return;
      // 添加完隐藏输入框
      this.isShowPayment= "",// 显示实体收款人编辑
      this.isShowOperations= "",// 实现管拨收款人编辑
      this.getPrganizationlist_managerFn() //刷新列表

      this.$message({
        type: "success",
        message: msg,
      });
    },

    // 修改操作人员名字
    async editOperationName(row, event) {
      // 如果是回车键盘，就不触发blur事件
      if (event.code == "Enter") {
        this.personBlur = "xxx";
      }
      // 名字、职务、拨比为空就直接退出
      if (row.commission == "" || row.postion == "" || row.name == "") {
        this.$message({
          type: "warning",
          message: "不可以为空",
        });
        return;
      }
      let { code, msg } = await getOrganizationManagerEditApi(row);
      if (code != 200) return;
      // 添加完隐藏输入框
      this.isShowAlterName= "", // 是否显示名称排序
      this.isShowAlterSort= "",// 是否显示编辑排序
      this.isShowAlterFullName= "",// 是否显示编辑排序
      this.isShowOperationName= "", // 是否显示操作人员名字编辑
      this.isShowOperationCommission= "",// 是否显示操作人员拨比编辑
      this.isShowOperationPostion= "",// 是否显示操作人员职务编辑
      this.isShowPayment= "",// 显示实体收款人编辑
      this.isShowOperations= "",// 实现管拨收款人编辑

      // 还原blur事件
      this.personBlur = "blur";

      this.$message({
        type: "success",
        message: msg,
      });
    },

    // 取消授权
    async cancelAuthoriZationFn(row) {
      let { code, msg } = await getOrganizationManagerRemoveApi(row.id);
      this.currentSelectItem.managerList =
        this.currentSelectItem.managerList.filter((item) => item.id != row.id);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
      // this.getPrganizationlist_managerFn();
    },

    // 添加操作人员
    async addPersonFn() {
      const addObjPerson = this.addObjPerson;
      if (addObjPerson.organizationId == "") {
        this.$message({type: "warning",message: "请选择实体",});
        return;
      }
      if (addObjPerson.phone == "") {
        this.$message({type: "warning",message: "请输入手机号",});
        return;
      }
      if (addObjPerson.phone.length != 11) {
        this.$message({type: "warning",message: "请输入正确的手机号",});
        return;
      }
      // if (Number.isNaN(Number(addObjPerson.commission))) {
      //   this.$message({
      //     type: "warning",
      //     message: "拨比需要数字",
      //   });
      //   return;
      // }
      let { code, msg } = await getOrganizationManagerAddApi(addObjPerson);
      if (code != 200) return;
      this.currentSelectItem.managerList.push(addObjPerson);
      await this.getPrganizationlist_managerFn();
      let addItem = this.entityList.find(
        (item) => item.id == addObjPerson.organizationId
      );
      this.selectTabelFn(addItem);
      this.addObjPerson = {
        phone: "",
        postion: "",
        commission: "",
        organizationId: "",
      };
      this.$message({
        type: "success",
        message: msg,
      });
      this.bottomPersonBtnShow = true;
    },

    // 表格选择
    selectTabelFn(item) {
      this.isClick = true;
      // this.currentSelectItem = item;
      this.addObjPerson.organizationId = item.id;
      if (item.id) {
        this.getPrganizationlist_managerinfoFn(item.id);
      }
    },

    // 重设添加
    resetAdd() {
      this.bottomBtnShow = true;
      this.addObj = {
        fullName: "",
        name: "",
        sort: "",
        payment: '',
        operations: '',
        managerList:[], //实体收款人和管拨收款人
      };
    },

    //取消
    cancelFn() {
      this.bottomBtnShow = true;
    },

    // 添加实体收款人和管拨收款人 输入的时候
    remoteMethod(e){
      if(!e) {
        this.paymentOrOperation = []
        return
      }
      this.surePositionOrganizationManager(e) // 添加实体收款人和管拨收款人时调的查询人的接口
    },

    // 添加实体收款人和管拨收款人时调的查询人的接口
    surePositionOrganizationManager: debounce(async function(e){
      let phonenumber = e
      let result = await surePositionOrganizationManagerApi({phonenumber})
      if(result.code==200){
        this.paymentOrOperation = result.data
      }
    },300),

    // 添加
    async addEntityFn() {
      const addObj = this.addObj;
      if (addObj.fullName==''||addObj.name==''||addObj.operations==''||addObj.payment==''||addObj.sort=='') {
        this.$message({type: "warning",message: "请填写完整"});
        return;
      }
      if (Number.isNaN(Number(addObj.sort))) {
        this.$message({type: "warning",message: "排序需要数字"});
        return;
      }
      // 把实体收款人和管拨收款人加到managerList字段里面
      this.addObj.managerList = [] //先清空
      this.addObj.managerList.push({type:1,phone:this.addObj.operations}) //管拨收款人
      this.addObj.managerList.push({type:2,phone:this.addObj.payment}) //实体收款人

      let { code, msg } = await getPrganizationAddApi(addObj);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
      // 重设
      this.resetAdd();
      // 重新获取数据

      this.getPrganizationlist_managerFn(); //获取实体列表
    },

    // 获取实体列表
    async getPrganizationlist_managerFn() {
      let { code, rows } = await getPrganizationlist_managerApi();
      if (code != 200) return;
      this.entityList = JSON.parse(JSON.stringify(rows));
    },

    //查询对应的操作人员
    async getPrganizationlist_managerinfoFn(id) {
      console.log(id, "111");
      let { code, rows } = await getPrganizationlist_managerinfoApi({
        organizationId: id,
      });
      if (code != 200) return;
      this.currentSelectItem.managerList = rows;
    },

    // 点击添加材料
    clickbBtn() {
      //显示输入框
      this.bottomBtnShow = false;
      //输入框自动获取焦点
      this.$nextTick(() => {
        this.$refs.bottBtn.focus();
      });
    },

    //输入框按回车的回调
    addMaterials() {
      if (this.bottomBtnValue) {
        //隐藏输入框
        this.bottomBtnShow = true;
        // this.bottomBtnValue
        this.helpList.push({
          id: "",
          title: this.bottomBtnValue,
          content: [],
        });
        this.bottomBtnValue = "";
      } else {
        this.$message({ type: "warning", message: "请输入名称" });
      }
    },

    // 操作人员重置按钮
    resetStaff() {
      this.bottomPersonBtnShow = true;
      this.addObjPerson = {
        type: 0,//0其他 1运营总监 2拨比收款人
        phone: "",
        postion: "",
        commission: "",
        organizationId: "",
      };
    },

    // 点击项目按钮
    clickProjectBtn() {
      this.currentBtnState = 1;
    },
    //点击咨询按钮
    clickConsultBtn() {
      this.currentBtnState = 2;
    },
    //点击内容按钮
    clickContentBtn() {
      this.currentBtnState = 3;
    },
  },
};
</script>


<style>
.addRemote .el-scrollbar__view{
  padding: 0 15px;
}
</style>
<style scoped lang="scss">
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

.entity-box {
  /* flex-grow: 1; */
  height: calc(100% - 60px);
}
.entity-box .el-row {
  height: 100%;
  margin-bottom: 0;
}
.entity-box .el-col,
.entity-box .el-card {
  height: 100%;
}
.entity-box .el-card {
  position: relative;
}
::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  height: calc(100% - 45px);
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

/* 表格样式 */
.el-table {
  margin-bottom: 50px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  padding: 11px 0;
  /* border-bottom: 0; */
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}

.addList {
  padding: 15px 0;
  margin: 0;
  margin-left: 60px;
}
.addList > i {
  cursor: pointer;
  border: 1px solid #909aaa;
  font-size: 12px;
}
/* 表格样式 end */

/* 添加按钮 */
.bottomBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.bottomBtn .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
.bottomBtn .el-input {
  width: 100%;
}
::v-deep .bottomBtn .el-input .el-input__inner {
  height: 46px;
  line-height: 46px;
  border: 0;
  border-top: 1px solid #ecedf0;
  // background-color: #f8f8f8;
  // text-align: center;
}
/* 添加按钮end */

/* 右侧样式 */
::v-deep .top .right {
  flex: none;
}
.el-button-group .el-button {
  background-color: #f0f2f5;
  color: #2e3f5e;
  border: 1px solid #f0f2f5;
}
.el-button-group .el-button.isActive {
  background-color: #fff;
  color: #f87a23;
  font-weight: bold;
}

/* 项目 */
.project-box h3 {
  display: flex;
  font-size: 12px;
  color: #909aaa;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ecedf0;
}
.project-box h3 > p {
  width: 49%;
  margin-left: 1%;
  font-weight: bold;
}

::v-deep .el-tree {
  /* height: 100%; */
  padding-top: 20px;
  margin-bottom: 60px;
  /* overflow: scroll; */
}
::v-deep .el-tree::-webkit-scrollbar {
  width: 0px;
}
::v-deep .el-tree .is-expanded {
  position: relative;
}
::v-deep .el-tree .is-expanded::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 8px;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #ebebeb;
}
::v-deep .el-tree .tree-add,
::v-deep .el-tree .tree-minus {
  position: relative;
  margin-right: 7px;
  font-size: 16px;
  background-color: #fff;
  z-index: 1;
}
::v-deep .el-tree .el-tree-node__children .tree-add.is-leaf,
::v-deep .el-tree .el-tree-node__children .tree-minus.is-leaf {
  opacity: 0;
}
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-add,
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-minus {
  opacity: 0;
  margin-right: 0;
}
::v-deep
  .el-tree
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content {
  padding-left: 43px !important;
}
::v-deep .el-tree .tree-minus {
  display: none;
}
::v-deep .el-tree .is-expanded > .el-tree-node__content > span > .tree-add {
  display: none;
}
::v-deep .el-tree .is-expanded > .el-tree-node__content > span > .tree-minus {
  display: inline-block;
}

::v-deep .el-tree .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 0;
}
::v-deep .el-tree .is-expanded .is-expanded::before {
  left: 25px;
}
::v-deep .el-tree .el-tree-node__content {
  height: 36px;
}
::v-deep .el-tree .el-icon-caret-right:before {
  display: none;
}
::v-deep .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
}
::v-deep .el-tree .el-icon-caret-right.is-leaf {
  opacity: 0;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
}
// .custom-tree-node .el-input {
//   width: 49%;
//   margin-left: auto;
// }

/* 内容 */
.content-box h3 {
  display: flex;
  font-size: 12px;
  color: #909aaa;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ecedf0;
}
.content-box h3 > p {
  width: 60%;
  font-weight: bold;
}
.content-box h3 > p:last-child {
  width: 40%;
  font-weight: bold;
}
.content-box ul {
  margin-bottom: 60px;
}
.content-box ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}
.content-box ul > li p {
  width: 60%;
  color: #2e3f5e;
}
.content-box ul > li .el-input {
  width: 40%;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  z-index: 99999 !important;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}

.bottomBtn {
  .footerBox {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    border-top: 1px solid #ecedf0;
    padding: 5px 0;

    .el-input,
    .el-select {
      width: 150px;
      margin-right: 10px;
      ::v-deep .el-input__inner{
        padding: 0 5px;
      }
      ::v-deep .el-input__suffix{
        display: none;
      }
    }
    .miniInput{
      width: 90px;
    }

    .box-button {
      display: flex;

      .el-button.el-button--primary {
        border: 1px solid #f87a23;
        background-color: #f87a23;
        color: #ffffff;
        width: 80px;
        height: 34px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        padding: 0;
      }
      ::v-deep .el-button--default {
        background-color: #ffffff;
        width: 80px;
        height: 34px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #606e84;
        padding: 0;
        border: 1px solid #ecedf0;
      }
    }
  }
  .addStaff {
    .el-input {
      // width: 18%;
      margin-right: 5px;
    }
  }
}
.input_box {
  display: flex;
  flex-wrap: wrap;
}

.bottomBtn .addStaff .el-input:first-child {
  // width: 26%;
}
.bottomBtn .addStaff .el-input:nth-child(2) {
  // width: 23%;
}

.cancelAuthoriZation {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f87a23;
  cursor: pointer;
}
::v-deep .bottomBtn .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
  border: 0;
  font-size: 14px;
  border: 1px solid #ecedf0;
}
</style>